<!-- Breadcrumb -->
<ul class="breadcrumb">
	<li><a href="<?php echo getURL(array('index')); ?>" class="glyphicons home"><i></i> <?php echo APP_NAME; ?></a></li>
	<li class="divider"></li>
	<li><?php echo $translate->_('ui_elements'); ?></li>
</ul>
<!-- // Breadcrumb END -->

<h3 class="heading-mosaic"><?php echo $translate->_('ui_elements_long'); ?></h3>
<div class="innerLR">
	
	<!-- Ribbons -->
	<div class="widget">
	
		<!-- Widget Heading -->
		<div class="widget-head">
			<h3 class="heading">Ribbons</h3>
		</div>
		<!-- // Widget Heading END -->
		
		<div class="widget-body">
		
			<!-- Row -->
			<div class="row-fluid">
			
				<!-- Column -->
				<div class="span8">
				
					<!-- Row -->
					<div class="row-fluid">
					
						<!-- Column -->
						<div class="span4">
							<div class="box-generic">
								Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
								
								<!-- Ribbon -->
								<div class="ribbon-wrapper"><div class="ribbon default">50% Off</div></div>
							</div>
						</div>
						<!-- // Column END -->
						
						<!-- Column -->
						<div class="span4">
							<div class="box-generic">
								Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
								
								<!-- Ribbon -->
								<div class="ribbon-wrapper"><div class="ribbon">50% Off</div></div>
							</div>
						</div>
						<!-- // Column END -->
						
						<!-- Column -->
						<div class="span4">
							<div class="box-generic">
								Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
								
								<!-- Ribbon -->
								<div class="ribbon-wrapper"><div class="ribbon primary">50% Off</div></div>
							</div>
						</div>
						<!-- // Column END -->
						
					</div>
					<!-- // Row END -->
					<div class="separator bottom"></div>
					
					<!-- Row -->
					<div class="row-fluid">
					
						<!-- Column -->
						<div class="span4">
							<div class="box-generic">
								Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
								
								<!-- Ribbon -->
								<div class="ribbon-wrapper"><div class="ribbon success">50% Off</div></div>
							</div>
						</div>
						<!-- // Column END -->
						
						<!-- Column -->
						<div class="span4">
							<div class="box-generic">
								Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
								
								<!-- Ribbon -->
								<div class="ribbon-wrapper"><div class="ribbon warning">50% Off</div></div>
							</div>
						</div>
						<!-- // Column END -->
						
						<!-- Column -->
						<div class="span4">
							<div class="box-generic">
								Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
								
								<!-- Ribbon -->
								<div class="ribbon-wrapper"><div class="ribbon danger">50% Off</div></div>
							</div>
						</div>
						<!-- // Column END -->
						
					</div>
					<!-- // Row END -->
					
					<div class="separator bottom"></div>
					<h3>Smaller</h3>
					
					<!-- Row -->
					<div class="row-fluid">
					
						<!-- Column -->
						<div class="span4">
							<div class="box-generic">
								Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took ...
								
								<!-- Ribbon -->
								<div class="ribbon-wrapper small"><div class="ribbon success">50% Off</div></div>
							</div>
						</div>
						<!-- // Column END -->
						
						<!-- Column -->
						<div class="span4">
							<div class="box-generic">
								Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took ...
								
								<!-- Ribbon -->
								<div class="ribbon-wrapper small"><div class="ribbon warning">50% Off</div></div>
							</div>
						</div>
						<!-- // Column END -->
						
						<!-- Column -->
						<div class="span4">
							<div class="box-generic">
								Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took ...
								
								<!-- Ribbon -->
								<div class="ribbon-wrapper small"><div class="ribbon danger">50% Off</div></div>
							</div>
						</div>
						<!-- // Column END -->
						
					</div>
					<!-- // Row END -->
				
				</div>
				<!-- // Column END -->
				
				<!-- Column -->
				<div class="span4">
				
<!-- Code Sample -->
<div class="code show">
<h3>Size</h3>
<pre class="prettyprint">
&lt;!-- Default (Large) --&gt;
&lt;!-- Can be attached to any element with position relative --&gt;
&lt;div class="box-generic"&gt;
	Lorem Ipsum is simply dummy text of the printing and typesetting industry ...
	
	&lt;!-- Ribbon --&gt;
	&lt;div class="ribbon-wrapper"&gt;&lt;div class="ribbon default"&gt;50% Off&lt;/div&gt;&lt;/div&gt;
&lt;/div>
</pre>

<pre class="prettyprint">
&lt;!-- Smaller --&gt;
&lt;div class="ribbon-wrapper small"&gt;
	&lt;div class="ribbon default"&gt;50% Off&lt;/div&gt;
&lt;/div&gt;
</pre>

<h3>Style</h3>
<pre class="prettyprint">
&lt;!-- Default --&gt;
&lt;div class="ribbon-wrapper"&gt;
	&lt;div class="ribbon"&gt;50% Off&lt;/div&gt;
&lt;/div&gt;
</pre>
<pre class="prettyprint margin-bottom-none">
&lt;!-- Other --&gt;
&lt;div class="ribbon warning"&gt;50% Off&lt;/div&gt;
&lt;div class="ribbon success"&gt;50% Off&lt;/div&gt;
&lt;div class="ribbon danger"&gt;50% Off&lt;/div&gt;
&lt;div class="ribbon primary"&gt;50% Off&lt;/div&gt;
&lt;div class="ribbon default"&gt;50% Off&lt;/div&gt;
</pre>
</div>
<!-- // Code Sample END -->
				
				</div>
				<!-- // Column END -->
				
			</div>
			<!-- // Row END -->
			
		</div>
	</div>
	<!-- // Ribbons END -->
	
	<!-- Buttons -->
	<table class="table table-vertical-center table-pricing table-pricing-2 table-bordered" id="demo_buttons">
		<thead>
			<tr>
				<th class="center">Regular Buttons</th>
				<th class="center">Buttons + Icons</th>
				<th class="center">Buttons + Dropdown</th>
				<th style="width: 35%" class="center">Double Buttons</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="center">
					<span class="btn btn-block btn-default">Default</span>
				</td>
				<td class="center">
					<span class="btn btn-block btn-default btn-icon glyphicons home"><i></i>Default</span>
				</td>
				<td class="center">
					<div class="btn-group btn-block">
						<div class="leadcontainer">
							<button class="btn dropdown-lead btn-default">Default</button>
						</div>
						<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span> </a>
						<ul class="dropdown-menu pull-right">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
					</div>
				</td>
				<td class="center">
					<span class="btn btn-icon-stacked btn-block btn-default glyphicons facebook"><i></i><span>Join using your</span><span class="strong">Facebook Account</span></span>
				</td>
			</tr>	
			<tr>
				<td class="center">
					<span class="btn btn-block btn-primary">Primary</span>
				</td>
				<td class="center">
					<span class="btn btn-block btn-primary btn-icon glyphicons home"><i></i>Primary</span>
				</td>
				<td class="center">
					<div class="btn-group btn-block">
						<div class="leadcontainer">
							<button class="btn dropdown-lead btn-primary">Primary</button>
						</div>
						<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span> </a>
						<ul class="dropdown-menu pull-right">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
					</div>
				</td>
				<td class="center">
					<span class="btn btn-icon-stacked btn-block btn-primary glyphicons facebook"><i></i><span>Join using your</span><span class="strong">Facebook Account</span></span>
				</td>
			</tr>
			<tr>
				<td class="center">
					<span class="btn btn-block btn-warning">Warning</span>
				</td>
				<td class="center">
					<span class="btn btn-block btn-warning btn-icon glyphicons home"><i></i>Warning</span>
				</td>
				<td class="center">
					<div class="btn-group btn-block">
						<div class="leadcontainer">
							<button class="btn dropdown-lead btn-warning">Warning</button>
						</div>
						<a class="btn btn-warning dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span> </a>
						<ul class="dropdown-menu pull-right">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
					</div>
				</td>
				<td class="center">
					<span class="btn btn-icon-stacked btn-block btn-warning glyphicons facebook"><i></i><span>Join using your</span><span class="strong">Facebook Account</span></span>
				</td>
			</tr>
			<tr>	
				<td class="center">
					<span class="btn btn-block btn-success">Success</span>
				</td>
				<td class="center">
					<span class="btn btn-block btn-success btn-icon glyphicons home"><i></i>Success</span>
				</td>
				<td class="center">
					<div class="btn-group btn-block">
						<div class="leadcontainer">
							<button class="btn dropdown-lead btn-success">Success</button>
						</div>
						<a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span> </a>
						<ul class="dropdown-menu pull-right">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
					</div>
				</td>
				<td class="center">
					<span class="btn btn-icon-stacked btn-block btn-success glyphicons facebook"><i></i><span>Join using your</span><span class="strong">Facebook Account</span></span>
				</td>
			</tr>
			<tr>
				<td class="center">
					<span class="btn btn-block btn-danger">Danger</span>
				</td>
				<td class="center">
					<span class="btn btn-block btn-danger btn-icon glyphicons home"><i></i>Danger</span>
				</td>
				<td class="center">
					<div class="btn-group btn-block">
						<div class="leadcontainer">
							<button class="btn dropdown-lead btn-danger">Danger</button>
						</div>
						<a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span> </a>
						<ul class="dropdown-menu pull-right">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
					</div>
				</td>
				<td class="center">
					<span class="btn btn-icon-stacked btn-block btn-danger glyphicons facebook"><i></i><span>Join using your</span><span class="strong">Facebook Account</span></span>
				</td>
			</tr>
			<tr>
				<td class="center">
					<span class="btn btn-block btn-inverse">Inverse</span>
				</td>
				<td class="center">
					<span class="btn btn-block btn-inverse btn-icon glyphicons home"><i></i>Inverse</span>
				</td>
				<td class="center">
					<div class="btn-group btn-block">
						<div class="leadcontainer">
							<button class="btn dropdown-lead btn-inverse">Inverse</button>
						</div>
						<a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span> </a>
						<ul class="dropdown-menu pull-right">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
					</div>
				</td>
				<td class="center">
					<span class="btn btn-icon-stacked btn-block btn-inverse glyphicons facebook"><i></i><span>Join using your</span><span class="strong">Facebook Account</span></span>
				</td>
			</tr>
		</tbody>
	</table>
	<div class="separator bottom"></div>
	<!-- // Buttons END -->
	
	<!-- Progress bars -->
	<table class="table table-pricing table-pricing-2 table-bordered">
		<thead>
			<tr>
				<th class="shortRight">Progress Bars</th>
				<th></th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="shortRight">Default</td>
				<td>
					<div class="progress">
						<div class="bar" style="width: 20%;"></div>
					</div>
				</td>
			</tr>
			<tr>
				<td class="shortRight">Primary</td>
				<td>
					<div class="progress progress-primary">
						<div class="bar" style="width: 30%;"></div>
					</div>
				</td>
			</tr>
			<tr>
				<td class="shortRight">Success</td>
				<td>
					<div class="progress progress-success">
						<div class="bar" style="width: 60%;"></div>
					</div>
				</td>
			</tr>
			<tr>
				<td class="shortRight">Warning</td>
				<td>
					<div class="progress progress-warning">
						<div class="bar" style="width: 55%;"></div>
					</div>
				</td>
			</tr>
			<tr>
				<td class="shortRight">Danger</td>
				<td>
					<div class="progress progress-danger">
						<div class="bar" style="width: 80%;"></div>
					</div>
				</td>
			</tr>
			<tr>
				<td class="shortRight">Inverse</td>
				<td>
					<div class="progress progress-inverse">
						<div class="bar" style="width: 30%;"></div>
					</div>
				</td>
			</tr>
			<tr>
				<td class="shortRight">Mini</td>
				<td>
					<div class="progress progress-mini">
						<div class="bar" style="width: 40%;"></div>
					</div>
					<div class="progress progress-danger progress-mini">
						<div class="bar" style="width: 55%;"></div>
					</div>
					<div class="progress progress-success progress-mini">
						<div class="bar" style="width: 80%;"></div>
					</div>
					<div class="progress progress-warning progress-mini">
						<div class="bar" style="width: 60%;"></div>
					</div>
					<div class="progress progress-primary progress-mini">
						<div class="bar" style="width: 75%;"></div>
					</div>
					<div class="progress progress-inverse progress-mini">
						<div class="bar" style="width: 50%;"></div>
					</div>
				</td>
			</tr>
		</tbody>
	</table>
	<div class="separator bottom"></div>
	<!-- // Progress bars END -->
	
	<!-- Alerts -->
	<div class="widget">
		
		<!-- Widget Heading -->
		<div class="widget-head">
			<h3 class="heading">Alerts</h3>
		</div>
		<!-- // Widget Heading END -->
		
		<div class="widget-body">
		
			<!-- Alert -->
			<div class="alert alert-primary">
				<button type="button" class="close" data-dismiss="alert">&times;</button>
				<strong>Warning!</strong> Best check yo self, you're not looking
				too good.
			</div>
			<!-- // Alert END -->
			
			<!-- Alert -->
			<div class="alert">
				<button type="button" class="close" data-dismiss="alert">&times;</button>
				<strong>Warning!</strong> Best check yo self, you're not looking
				too good.
			</div>
			<!-- // Alert END -->
			
			<!-- Alert -->
			<div class="alert alert-success">
				<button type="button" class="close" data-dismiss="alert">&times;</button>
				<strong>Warning!</strong> Best check yo self, you're not looking
				too good.
			</div>
			<!-- // Alert END -->
			
			<!-- Alert -->
			<div class="alert alert-error">
				<button type="button" class="close" data-dismiss="alert">&times;</button>
				<strong>Warning!</strong> Best check yo self, you're not looking
				too good.
			</div>
			<!-- // Alert END -->
			
		</div>
	</div>
	<!-- // Alerts END -->
	
	<!-- Tooltips -->
	<div class="widget">
		
		<!-- Widget Heading -->
		<div class="widget-head">
			<h3 class="heading">Tooltips</h3>
		</div>
		<!-- // Widget Heading END -->
		
		<div class="widget-body">
		
			<!-- Row -->
			<div class="row-fluid">
			
				<!-- Column -->
				<div class="span6">
					<p class="muted">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="" data-original-title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="" data-original-title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="" data-original-title="A much longer tooltip belongs right here to demonstrate the max-width we apply.">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="" data-original-title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p>
				</div>
				<!-- // Column END -->
				
				<!-- Column -->
				<div class="span6">
					<div class="innerAll">
					
						<!-- Live DEMO Tooltip Options Table -->
						<table class="table table-bordered table-vertical-center">
							<tbody>
								<tr>
									<td class="center"><span class="btn btn-inverse" data-toggle="tooltip" data-original-title="Tooltip on Left" data-placement="left">Tooltip on Left</span></td>
									<td class="center"><span class="btn btn-inverse" data-toggle="tooltip" data-original-title="Tooltip on Top" data-placement="top">Tooltip on Top</span></td>
								</tr>
								<tr>
									<td class="center"><span class="btn btn-inverse" data-toggle="tooltip" data-original-title="Tooltip on Right" data-placement="right">Tooltip on Right</span></td>
									<td class="center"><span class="btn btn-inverse" data-toggle="tooltip" data-original-title="Tooltip on Bottom" data-placement="bottom">Tooltip on Bottom</span></td>
								</tr>
							</tbody>
						</table>
						<!-- // Live DEMO Tooltip Options Table END -->
						
					</div>
				</div>
				<!-- // Column END -->
				
			</div>
			<!-- // Row END -->
			
<!-- Tooltips Code Sample -->
<div class="code show">
<div class="row-fluid">
<div class="span6">
<pre class="prettyprint margin-bottom-none">
// Tooltip on Left
&lt;span class="btn btn-inverse" data-toggle="tooltip" data-original-title="Tooltip on Left" data-placement="left"&gt;Tooltip on Left&lt;/span&gt;

// Tooltip on Top
&lt;span class="btn btn-inverse" data-toggle="tooltip" data-original-title="Tooltip on Top" data-placement="top"&gt;Tooltip on Top&lt;/span&gt;
</pre>
</div>
<div class="span6">
<pre class="prettyprint margin-bottom-none">
// Tooltip on Right
&lt;span class="btn btn-inverse" data-toggle="tooltip" data-original-title="Tooltip on Right" data-placement="right"&gt;Tooltip on Right&lt;/span&gt;

// Tooltip on Bottom
&lt;span class="btn btn-inverse" data-toggle="tooltip" data-original-title="Tooltip on Bottom" data-placement="bottom"&gt;Tooltip on Bottom&lt;/span&gt;
</pre>
</div>
</div>
</div>
<!-- // Tooltips Code Sample END -->
			
		</div>
	</div>
	<!-- // Tooltips END -->
	
	<!-- Popovers -->
	<div class="widget">
		
		<!-- Widget Heading -->
		<div class="widget-head">
			<h3 class="heading">Popovers</h3>
		</div>
		<!-- // Widget Heading END -->
		
		<div class="widget-body">
		
			<!-- Row -->
			<div class="row-fluid">
			
				<!-- Column -->
				<div class="span6" id="demo_popovers">
					
					<!-- Row -->
					<div class="row-fluid">
					
						<!-- Column -->
						<div class="span6">
							<div class="innerAll">
							
								<!-- Popover Top -->
								<div class="popover top">
									<div class="arrow"></div>
									<h3 class="popover-title">Popover top</h3>
									<div class="popover-content">
										<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.
											Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
									</div>
								</div>
								<!-- // Popover Top END -->
								
							</div>
						</div>
						<!-- // Column END -->
						
						<!-- Column -->
						<div class="span6">
							<div class="innerAll">
							
								<!-- Popover Right -->
								<div class="popover right">
									<div class="arrow"></div>
									<h3 class="popover-title">Popover right</h3>
									<div class="popover-content">
										<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.
											Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
									</div>
								</div>
								<!-- // Popover Right END -->
								
							</div>
						</div>
						<!-- // Column END -->
						
					</div>
					<!-- // Row END -->
					
					<!-- Row -->
					<div class="row-fluid">
					
						<!-- Column -->
						<div class="span6">
							<div class="innerAll">
							
								<!-- Popover Bottom -->
								<div class="popover bottom">
									<div class="arrow"></div>
									<h3 class="popover-title">Popover bottom</h3>
									<div class="popover-content">
										<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.
											Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
									</div>
								</div>
								<!-- // Popover Bottom END -->
								
							</div>
						</div>
						<!-- // Column END -->
						
						<!-- Column -->
						<div class="span6">
							<div class="innerAll">
							
								<!-- Popover Left -->
								<div class="popover left">
									<div class="arrow"></div>
									<h3 class="popover-title">Popover left</h3>
									<div class="popover-content">
										<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.
											Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
									</div>
								</div>
								<!-- // Popover Left END -->
								
							</div>
						</div>
						<!-- // Column END -->
						
					</div>
					<!-- // Row END -->
					
				</div>
				<!-- // Column END -->
				
				<!-- Column -->
				<div class="span6">
					<div class="innerAll">
					
						<!-- Live DEMO Popover Options Table -->
						<table class="table table-bordered table-vertical-center">
							<tbody>
								<tr>
									<td class="center"><span class="btn btn-inverse" data-toggle="popover" data-title="Popover on Left" data-content="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum." data-placement="left">Popover on Left</span></td>
									<td class="center"><span class="btn btn-inverse" data-toggle="popover" data-title="Popover on Top" data-content="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum." data-placement="top">Popover on Top</span></td>
								</tr>
								<tr>
									<td class="center"><span class="btn btn-inverse" data-toggle="popover" data-title="Popover on Right" data-content="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum." data-placement="right">Popover on Right</span></td>
									<td class="center"><span class="btn btn-inverse" data-toggle="popover" data-title="Popover on Bottom" data-content="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum." data-placement="bottom">Popover on Bottom</span></td>
								</tr>
							</tbody>
						</table>
						<div class="separator bottom"></div>
						<!-- // Live DEMO Popover Options Table END -->
						
<!-- Popovers Code Sample -->
<div class="code show">
<pre class="prettyprint margin-bottom-none">
// Popover on Left
&lt;span class="btn btn-inverse" data-toggle="popover" data-title="Popover on Left" data-content="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum." data-placement="left"&gt;Popover on Left&lt;/span&gt;

// Popover on Top
&lt;span class="btn btn-inverse" data-toggle="popover" data-title="Popover on Top" data-content="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum." data-placement="top"&gt;Popover on Top&lt;/span&gt;

// Popover on Right
&lt;span class="btn btn-inverse" data-toggle="popover" data-title="Popover on Right" data-content="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum." data-placement="right"&gt;Popover on Right&lt;/span&gt;

// Popover on Bottom
&lt;span class="btn btn-inverse" data-toggle="popover" data-title="Popover on Bottom" data-content="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum." data-placement="bottom"&gt;Popover on Bottom&lt;/span&gt;
</pre>
</div>
<!-- // Popovers Code Sample END -->
						
					</div>
				</div>
				<!-- // Column END -->
				
			</div>
			<!-- // Row END -->
			
		</div>
	</div>
	<!-- // Popovers END -->

	<!-- Pagination -->
	<!-- Pagination: Aligned left -->
	<div class="widget">
		<div class="widget-head"><h3 class="heading">Pagination</h3></div>
		<div class="widget-body">
			<div class="pagination margin-none">
				<ul>
					<li class="disabled"><a href="#">&laquo;</a></li>
					<li class="active"><a href="#">1</a></li>
					<li><a href="#">2</a></li>
					<li><a href="#">3</a></li>
					<li><a href="#">&raquo;</a></li>
				</ul>
			</div>
		</div>
	</div>
	<!-- // Pagination: Aligned left END -->
	
<!-- Code Sample -->
<div class="code show">
<pre class="prettyprint">
&lt;div class="pagination margin-none"&gt;
	&lt;ul&gt;
		&lt;li class="disabled"&gt;&lt;a href="#"&gt;<?php echo htmlentities('&laquo;'); ?>&lt;/a&gt;&lt;/li&gt;
		&lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href="#"&gt;<?php echo htmlentities('&raquo;'); ?>&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
&lt;/div&gt;
</pre>
</div>
<!-- // Code Sample END -->
	
	<!-- Pagination: Aligned right -->
	<div class="widget">
		<div class="widget-head"><h3 class="heading">Aligned right</h3></div>
		<div class="widget-body">
			<div class="pagination pagination-right margin-none">
				<ul>
					<li class="disabled"><a href="#">&laquo;</a></li>
					<li class="active"><a href="#">1</a></li>
					<li><a href="#">2</a></li>
					<li><a href="#">3</a></li>
					<li><a href="#">4</a></li>
					<li><a href="#">5</a></li>
					<li><a href="#">&raquo;</a></li>
				</ul>
			</div>
		</div>
	</div>
	<!-- // Pagination: Aligned right END -->
	
<!-- Code Sample -->
<div class="code show">
<pre class="prettyprint">
&lt;div class="pagination pagination-right margin-none"&gt;
	&lt;ul&gt;
		&lt;li class="disabled"&gt;&lt;a href="#"&gt;<?php echo htmlentities('&laquo;'); ?>&lt;/a&gt;&lt;/li&gt;
		&lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href="#"&gt;<?php echo htmlentities('&raquo;'); ?>&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
&lt;/div&gt;
</pre>
</div>
<!-- // Code Sample END -->
	
	<!-- Pagination: Aligned center -->
	<div class="widget">
		<div class="widget-head"><h3 class="heading">Aligned center</h3></div>
		<div class="widget-body">
			<div class="pagination pagination-centered margin-none">
				<ul>
					<li class="disabled"><a href="#">&laquo;</a></li>
					<li class="active"><a href="#">1</a></li>
					<li><a href="#">2</a></li>
					<li><a href="#">3</a></li>
					<li><a href="#">4</a></li>
					<li><a href="#">5</a></li>
					<li><a href="#">&raquo;</a></li>
				</ul>
			</div>
		</div>
	</div>
	<!-- // Pagination: Aligned center END -->
	
<!-- Code Sample -->
<div class="code show">
<pre class="prettyprint">
&lt;div class="pagination pagination-centered margin-none"&gt;
	&lt;ul&gt;
		&lt;li class="disabled"&gt;&lt;a href="#"&gt;<?php echo htmlentities('&laquo;'); ?>&lt;/a&gt;&lt;/li&gt;
		&lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href="#"&gt;<?php echo htmlentities('&raquo;'); ?>&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
&lt;/div&gt;
</pre>
</div>
<!-- // Code Sample END -->
	
	<!-- Pager -->
	<div class="widget">
		<div class="widget-head"><h3 class="heading">Pager</h3></div>
		<div class="widget-body">
			<ul class="pager margin-none">
				<li class="previous disabled"><a href="#">&larr; Older</a></li>
				<li class="next"><a href="#">Newer &rarr;</a></li>
			</ul>
		</div>
	</div>
	<!-- // Pager END -->
	
<!-- Code Sample -->
<div class="code show">
<pre class="prettyprint">
&lt;ul class="pager margin-none"&gt;
	&lt;li class="previous disabled"&gt;&lt;a href="#"&gt;<?php echo htmlentities('&larr;'); ?> Older&lt;/a&gt;&lt;/li&gt;
	&lt;li class="next"&gt;&lt;a href="#"&gt;<?php echo htmlentities('&rarr;'); ?> Newer&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
</div>
<!-- // Code Sample END -->
	
	<!-- // Pagination END -->
	
</div>